<template>
  <div class="container1">
    <div class="wechatapp">
      <div class="header">
        <open-data class="" type="userAvatarUrl"></open-data>
      </div>
    </div>
    <div class="auth-title">申请获取以下权限</div>
    <div class="auth-subtitle">获得你的公开信息（昵称、头像等）</div>
    <button
      class="login-btn"
      open-type="getUserInfo"
      @getuserinfo="bindGetuserinfo"
    >
      授权登录
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      server_url: "https://jinrigaoling.com/",
    };
  },
  mounted() {},
  methods: {
    bindGetuserinfo(e) {
      var user_data = e.mp.detail;
      var that = this;
      wx.login({
        success: function (res) {
          wx.showNavigationBarLoading();
          wx.request({
            url: that.server_url + "api/wxapp/public/login",
            header: {
              "content-type": "application/x-www-form-urlencoded",
            },
            method: "POST",
            data: {
              code: res.code,
              raw_data: user_data.rawData,
              encrypted_data: user_data.encryptedData,
              iv: user_data.iv,
              signature: user_data.signature,
            },
            success(result) {
              console.log("token", result.data.data.token);
              // 记录token user_id
              wx.setStorageSync("token", result.data.data.token);
              wx.setStorageSync("user", result.data.data.user);
              wx.reLaunch({
                url: "/pages/user/main",
              });
            },
            fail(res) {},
            complete(res) {},
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.container1 {
  padding: 0 60rpx;
}

.wechatapp {
  padding: 80rpx 0 48rpx;
  border-bottom: 1rpx solid #e3e3e3;
  margin-bottom: 72rpx;
  text-align: center;
}

.wechatapp .header {
  width: 190rpx;
  height: 190rpx;
  border: 2px solid #fff;
  margin: 0rpx auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
}

.auth-title {
  color: #585858;
  font-size: 40rpx;
  margin-bottom: 40rpx;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
}

.login-btn {
  border: none;
  height: 88rpx;
  line-height: 88rpx;
  background: #04be01;
  color: #fff;
  font-size: 11pt;
  border-radius: 999rpx;
}

.login-btn::after {
  display: none;
}

.login-btn.button-hover {
  box-shadow: inset 0 5rpx 30rpx rgba(0, 0, 0, 0.15);
}
</style>